<template>
	<view class="orderCenter" v-show="JSON.stringify(orderData) != '{}'">
		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%">
			<view class="title">订单详情</view>

			<view class="left-box" @tap="onClickLeft">
				<u-icon name="arrow-left" size="40" color="#000"></u-icon>
			</view>
		</u-navbar>

		<view class="orderbg">
			<view class="orderbg_status">
				<u-image src="/static/img/smile.png" width="34" height="34" v-if="orderData.status == 1 || orderData.status == 3 || orderData == 4 "></u-image>
				<u-image src="/static/img/dengdai.png" width="34" height="34" v-if="orderData.status == 0"></u-image>
				<u-image src="/static/img/peisongjilu.png" width="34" height="34" v-if="orderData.status == 2"></u-image>
				<span style="margin-left: 20rpx;">{{orderData.status == 0 ? '待支付' : orderData.status == 1 ? '购买成功' : orderData.status == 2 ? '商品配送中': orderData.status == 3 ? '已收货' : orderData.status == 4 ? '已评价' :orderData.status == 5 ? '售后订单' :'已完成'}}</span>
			</view>
		</view>

		<view class="addressview">
			<view class="addressviewname">
				{{orderData.userName}}
				<view class="dataphone">
					{{orderData.userMobile}}
				</view>
			</view>

			<view class="addressviewaddress">
				{{orderData.address}}
			</view>
		</view>


		<view class="prolistview">
			<view class="prolistviewitem">
				<image :src="orderData.image" class="prolistimg"></image>
				<view class="prolistname">
					{{orderData.name}}
				</view>
				<view class="prolistsku">
					{{orderData.specifications}} x{{orderData.num}}
				</view>

				<view class="prolistnum">
					
				</view>

				<view class="prolistprice">
					￥{{orderData.price}}
				</view>
			</view>



			<view class="infoviewitem" style="margin-top: 20px;">
				<view>
					订单编号
				</view>

				<view>
					{{orderData.orderNumber}}
				</view>
			</view>
			<view class="infoviewitem">
				<view>
					下单时间
				</view>

				<view>
					{{orderData.createTime}}
				</view>
			</view>

			<view class="infoviewitem">
				<view>
					支付方式
				</view>

				<view>
					{{orderData.payType == '1' ? '微信' : '支付宝'}}
				</view>
			</view>
			
			
			<view class="infoviewitem" v-if="orderData.status == 5">
				<view>
					退款理由
				</view>
			
				<view>
					{{orderData.refundDescribe}}
				</view>
			</view>
			
			<view class="infoviewitem" v-if="orderData.status == 5">
				<view>
					退款进度
				</view>
			
				<view>
					{{orderData.refundStatus == -1 ? '申请未通过' : orderData.refundStatus == '1' ?'处理中' : '处理完成'}}
				</view>
			</view>
			
			<view class="infoviewitem" v-if="orderData.status == 5">
				<view>
					退款结果
				</view>
			
				<view>
					{{orderData.refundType == 1 ? '退款' : orderData.refundStatus == '2' ? '换货' : '退款不退货'}}
				</view>
			</view>
			
			<view class="stepview" v-if="orderData.status == 2">
				<u-steps :list="orderDatalogisticsMessageList" :current="orderData.logisticsMessageList.length" direction="column" active-color="rgb(40,199,73)"></u-steps>
			</view>
			


			<view class="heji">
				合计: ￥{{orderData.allPrice}}
			</view>
			
			<view class="orderBtn">
				<view class="orderBtnItem" v-if="orderData.status == 0 " @click="waitPay(orderData)">
					去支付
				</view>
				
				<view class="orderBtnItem" v-if="orderData.status == 1 || orderData.status == 2" @click="goToTuikuan">
					申请退款
				</view>
				
				<view class="orderBtnItem" v-if="orderData.status == 2" @click="confirmRog(orderData.id)">
					确认收货
				</view>
				
				<view class="orderBtnItem" v-if="orderData.status == 3 && orderData.isComent == 0" @click="goTopingjia">
					去评价
				</view>
			</view>
		</view>
		<u-popup class="cancel-popup" v-model="cancelShow" mode="bottom" length="60%">
			<view class="header">取消订单</view>
			<view class="body">
				<view class="title">取消订单后，本单享有的优惠可能会一并取消，是否继续？</view>
				<view>
					<u-radio-group v-model="reason">
						<view class="value">
							<view class="radio-view" :key="index" v-for="(item, index) in cancelList">
								<u-radio :active-color="lightColor" label-size="25" shape="circle" :name="item.reason"
									@change="reasonChange">{{ item.reason }}</u-radio>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
			<view class="footer">
				<u-button size="medium" ripple v-if="reason" shape="circle" @click="submitCancel">提交</u-button>
			</view>
		</u-popup>

	</view>



	</view>
</template>

<script>
	import {
		orderDetails
	} from '@/api/user.js'
	
	import {
		confirmReceipt,
		getOrderList,
		cancelOrder,
		orderPay
	} from "@/api/order.js";
	
	import {
		getClearReason
	} from "@/api/after-sale.js";
	export default {

		data() {
			return {
				sn: "",
				orderData: {},
				navObj: {
					backgroundColor: '#ffffff',
				},
				cancelShow: false, //是否显示取消
				orderSn: "", //ordersn
				reason: "", //取消原因
				cancelList: "", //取消列表
				
			};
		},
		onLoad(options) {
			this.sn = options.sn;
			this.loadData();

		},
		
		computed: {
			orderDatalogisticsMessageList(){
				const { logisticsMessageList} = this.orderData;
				let arr = []
				logisticsMessageList.forEach(item => {
					arr.push({
						name: item.message + ' ' + item.createTime
					})
				})
				
				return arr
			}
		},
		methods: {
			
			waitPay(val) {
				
				
				uni.navigateTo({
					url: `/pages/order/payorder?id=${val.id}&price=${val.allPrice}`
				})
			
				
				
			},
			
			
			onCancel(sn) {
				this.cancelShow = true;
				uni.showLoading({
					title: "加载中",
				});
				getClearReason().then((res) => {
					if (res.data.result.length >= 1) {
						this.cancelList = res.data.result;
					}
					if (this.$store.state.isShowToast) {
						uni.hideLoading()
					};
				});
			},
			onClickLeft() {
				// uni.navigateBack();
				uni.navigateTo({
					url: "/pages/order/myOrder?status=0"
				})
			},
			loadData() {
				orderDetails({
					id: this.sn
				}).then(res => {
					this.orderData = res.data;
				})
			},
			
			goTopingjia(){
				uni.navigateTo({
					url: `/pages/business/pingjia?sn=${this.sn}`
				})
			},
			
			goToTuikuan(){
				uni.navigateTo({
					url: `/pages/business/tuikuan?sn=${this.sn}`
				})
			},
			confirmRog(id) {
				confirmReceipt({
					id
				}).then((res) => {
					if (res.code == '000000') {
						uni.showToast({
							title: "已确认收货",
							duration: 2000,
							icon: "none",
						});
						this.onClickLeft()
					}
				});
			},
		},
	};
</script>

<style scoped>
	.orderCenter {
		width: 100%;
		min-height: 100vh;
	}

	.title {
		position: absolute;
		top: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFang;
		font-weight: bold;
		font-size: 33rpx;
		color: #000;

	}

	.left-box {
		padding-left: 41rpx;
	}

	.orderbg {
		width: 100%;
		height: 436rpx;
		background: url("../../static/img/orderbg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
	
	::v-deep .u-navbar-placeholder {
		display: none;
	}

	.orderbg_status {
		width: 100%;
		height: 34rpx;
		line-height: 34rpx;
		position: absolute;
		top: 50%;
		text-align: center;

		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 31rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.addressview {
		width: 710rpx;
		height: 164rpx;
		position: relative;
		top: -50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 43rpx 30rpx 45rpx;
		margin-top: -64rpx;
	}

	.addressviewname {
		width: 100%;
		height: 48rpx;
		line-height: 20rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 29rpx;
		color: #101624;
	}

	.dataphone {
		display: inline-block;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 27rpx;
		color: #9196A2;
		padding-left: 20rpx;
	}

	.addressviewaddress {
		width: 100%;
		height: 27rpx;
		line-height: 27rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #3D4354;
	}

	.prolistview {
		width: 708rpx;
		margin: -60rpx auto;
		background: #FFFFFF;
		padding: 27rpx 20rpx;
	}

	.prolistviewitem {
		width: 100%;
		height: 104rpx;
		margin-bottom: 28rpx;
		position: relative;
	}

	.prolistimg {
		width: 104rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.prolistname {
		width: 500rpx;
		height: 27rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 27rpx;
		color: #151F38;
		line-height: 27rpx;
		position: absolute;
		top: 5rpx;
		left: 139rpx;
	}

	.prolistsku {
		font-family: PingFang;
		font-weight: 500;
		font-size: 23rpx;
		color: #878C9A;
		height: 23rpx;
		line-height: 23rpx;
		position: absolute;
		bottom: 8rpx;
		left: 141rpx;
	}

	.prolistnum {
		font-family: PingFang;
		font-weight: 500;
		font-size: 25rpx;
		color: #878C9A;
		height: 23rpx;
		line-height: 23rpx;
		position: absolute;
		bottom: 8rpx;
		right: 140rpx;
	}

	.prolistprice {
		height: 23rpx;
		line-height: 23rpx;
		position: absolute;
		bottom: 8rpx;
		right: 2rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 29rpx;
		color: #101624;
	}

	.remaker {
		width: 100%;
		height: 132rpx;
		border-top: 2rpx solid #f3f3f3;
	}

	.remakertitle {
		width: 100%;
		padding-top: 21rpx;
		padding-bottom: 21rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 27rpx;
		color: #101624;
	}

	.remakertext {
		width: 100%;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 27rpx;
		color: #585D6C;
	}

	.infoviewitem {
		width: 100%;
		height: 95rpx;
		line-height: 95rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 27rpx;
		color: #101624;
		border-bottom: 2rpx solid #f3f3f3;
		padding: 0 20rpx;
		background: #FFFFFF;
	}

	.heji {

		width: 100%;
		background: #FFFFFF;
		text-align: right;
		margin-top: 20rpx;
	}
	
	.orderBtn {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 60rpx;
	}
	
	.orderBtnItem {
		width: 137rpx;
		height: 100%;
		text-align: center;
		line-height: 50rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 23rpx;
		color: #000000;
		border-radius: 25rpx;
		border: 1rpx solid;
		margin-left: 20rpx;
		margin-top: 80rpx;
	}
	
	.stepview {
		width: 708rpx;
		margin: 0 auto;
		margin-top: 90rpx;
		padding: 0 47rpx;
		background: #FFFFFF;
	}
	
	
	.cancel-popup {
		.header {
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin: 15rpx 0rpx;
		}
	
		.body {
			padding: 30rpx;
	
			.title {
				font-weight: 600;
			}
	
			.value {
				display: flex;
				flex-direction: column;
				margin: 20rpx 0;
	
				.radio-view {
					margin: 20rpx 0rpx;
				}
			}
		}
	
		.footer {
			text-align: center;
		}
	}
	

</style>
